<template>
  <div class="photos-classify" >
    <div class="photos-list">
      <div v-for="value of classifylist" :key="value.id" class="photos-item">
        <Input type="text" v-model="value.label"></Input>
      </div>
      <Button type="primary" @click="changImgClassify" > 提交</Button>
      <Button type="primary" @click="getImgClassify(true)" > 新增一条</Button>
    </div>
    <div class="photos-tree">
      <el-tree
        :data="imgClassify"
        node-key="id"
        default-expand-all
        draggable>
      </el-tree>
    </div>
  </div>
</template>
<script>
import { Tree } from 'element-ui';
export default {

  name: 'ThePhotesClassify',
  components:{
    "el-tree":Tree,
  },
  props:{
    
  },
  data () {
    return {
      classifylist:[],
      addClassify:"新增图片分类",
    }
  },
  created(){
    this.getImgClassify();
  },
  mouted(){
  },
  computed: {
    imgClassify:function(){
      return this.$comFun.listToTree(this.classifylist);
    }
  },
  methods: {
    getImgClassify:function(isAdd){
      let url=isAdd?"/photos/addimgclassify?label="+this.addClassify:'/photos/imgclassify';
      this.$http.get(url)
      .then((response)=>{
        this.classifylist=response.data;
        this.$store.commit('setImgClassifyArr',response.data);
      });
    },
    changImgClassify:function(){
      this.$http({
        method: 'post',
        url:"/photos/changimgclassify",
        data:this.$comFun.treeToList(this.imgClassify),
      }).then((response)=>{
        this.classifylist=response.data;
        this.$store.commit('setImgClassifyArr',response.data);
      });
    },
  }
}
</script>
<style >
.photos-classify{
  margin-top: 1rem;
  display: flex;
  justify-content:space-around;
}
.photos-tree,.photos-list{
  max-width: 300px;
  width: 50%;
  float:left;
}
.photos-item{
  margin-bottom: 1rem;
}
.photos-tree .el-tree-node__content{
  margin-bottom: 1rem;
  /* background: #cf8; */
  height: 2.1rem;
}
.photos-tree .is-current .el-tree-node__content{
  background: #cfe;
}
.el-tree-node__expand-icon{
  font-size: 1rem;
  padding-left: 2rem; 
}
.el-tree-node__children .el-tree-node__children{
  padding-left: 2rem; 
}
</style>